<template>
  <div class="lnn_cource">
    <div class="lnn_top">
      <div>
        <van-icon name="arrow-left" @click="toIndex" />
        <span>讲师详情</span>
      </div>
    </div>
    <div class="lnn_news"   >
      <img :src="teacher.avatar" alt />
      <div class="lnn_small">
        <p class="lnn_all1">
          <span>{{teacher.level_name}}</span>
          <span>M20</span>
        </p>
        <p class="lnn_all2">
          <span>女</span>
          <span>{{teacher.teach_age}}教龄</span>
        </p>
      </div>
      <button @click="lnn_follow">关注</button>
      <!-- <button style="display:none">已关注</button> -->
    </div>
    <div class="lnn_bottom" style="height:100%">
      <van-tabs v-model="activeName">
        <van-tab title="讲师介绍" name="a">
          <div class="lnn_present">
            <div>
              <span>宿舍搜索</span>
              <span>222</span>
            </div>
            <div>
              <span>宿舍搜索</span>
              <span>222</span>
            </div>
            <div>
              <span>宿舍搜索</span>
              <span>222</span>
            </div>
          </div>
        </van-tab>
        <van-tab title="主讲课程" name="b">内容 2</van-tab>
        <van-tab title="学员评价" name="c">内容 3</van-tab>
      </van-tabs>
    </div>
    <div class="lnn_btn">
      <button>立即预约</button>
    </div>
  </div>
</template>

<script>
import { Icon, Tab, Tabs } from "vant";
import { teacher } from "@/request/http.js";

export default {
  components: {
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      activeName: "a",
      teacher: []
    };
  },
  created() {},
  mounted() {
    this.getTeacher();
  },
  methods: {
    // 跳转
    toIndex() {
      this.$router.push({ path: "/index" });
    },
    //获取数据
    getTeacher() {
      var id = this.$route.query.id;
      console.log(id);
     teacher(id).then(res => {
        console.log(res);
        this.teacher=res.teacher
        console.log(this.teacher)
      });
    },
    lnn_follow(){
      console.log("kk")
    }
  }
};
</script>

<style  scoped>
.lnn_cource {
  width: 100%;
  background-color: #ccc;
  position:relative;
  height: 100%;
}
.lnn_top {
  width: 100%;
  height: 100px;
  background-color: cornflowerblue;
  color: #fff;
  font-size: 18px;
  box-sizing: border-box;
  padding-left: 10px;
}
.lnn_top > div {
  width: 55%;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
.lnn_top > div > .van-icon {
  margin-top: 8px;
}
.lnn_news {
  width: 90%;
  height: 100px;
  background-color: #fff;
  border-radius: 5px;
  margin-left: 18px;
  position: relative;
  top: -30px;
  left: 0;
  display: flex;
  /* justify-content: space-between; */
  font-size: 14px;
}

.lnn_news img {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  margin: 20px 15px;
}
.lnn_small {
  width: 30%;
  height: 100%;
}
.lnn_all1 > span:nth-child(1) {
  font-size: 16px;
  margin-right: 5px;
}
.lnn_all1 > span:nth-child(2) {
  font-size: 12px;
  color: red;
}
.lnn_all2 {
  font-size: 12px;
  color: #ddd;
}
.lnn_all2 > span {
  margin-right: 5px;
}
.lnn_news > button {
  width: 70px;
  height: 30px;
  /* line-height: 30px; */
  background-color: azure;
  color: red;
  font-size: 14px;
  border-radius: 20px;
  float: right;
  margin: 30px 0;
  margin-left: 80px;
}
.lnn_present {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px;
  /* background-color: red; */
}
.lnn_present > div {
  margin-bottom: 25px;
  background-color: #ccc;
  font-size: 14px;
}
.lnn_present > div > span:nth-child(1) {
  margin-right: 15px;
}
.lnn_btn {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.lnn_btn > button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: red;
  color: #fff;
  font-size: 16px;
  border: none;
}
</style>
